import { useState, useCallback } from "react";
import { Input, Button, Upload, Modal, Checkbox } from "antd";
import type { UploadProps, CheckboxProps } from "antd";
import { RightOutlined, PlusOutlined, SearchOutlined } from "@ant-design/icons";
import { request } from "../../../../common/request";
import { urls } from "../../../../common/urls";
import UploadImg from "../../../../components/UploadImg";
import SelectUser from "../../../../components/SelectUser";
import "./index.less";

const { TextArea } = Input;

function AddGroup() {
  const [type, setType] = useState("list");
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [avatar, setAvatar] = useState('');
  const [groupName, setGroupName] = useState('');
  const [groupMark, setGroupMark] = useState('');
  const [checks, setChecks]: any = useState([]);
  const [friends, setFriends] = useState('');

  const handleAvatar = (avatar: string) => {
    setAvatar(avatar)
  }

  const showModal = () => {
    setIsModalOpen(true);
  }

  const handleGetChecks = (ids: any, names: any) => {
    setChecks(ids);
    setFriends(names);
  }

  const handleAddGroup = useCallback(
    () => {
      request({
        method: "post",
        data: {
          method: urls.createGroup,
          logo: avatar,
          name: groupName,
          friends_ids: checks,
          announcement: groupMark
        },
      }).then((res: any) => {
        setType("list");
        setIsModalOpen(false);
      });
    },
    [avatar, groupName, checks, groupMark]
  );


  return (
    <>
      <div className="add-user-content">
        <div className="user-link-group">
          <div className="link-item" style={{ borderTop: "none" }}>
            <div>群头像</div>
            <div className="upload-avatar">
              <UploadImg getAvatar={handleAvatar} />
            </div>
          </div>
          <div className="link-item add-user-item">
            <div>群名称</div>
            <Input placeholder="请输入群名称" onChange={(e) => setGroupName(e.target.value)} />
          </div>
          <div className="link-item">
            <div>选择好友</div>
            <div className="link-item-add-text" onClick={showModal}>
              {checks.length ? friends : '请选择好友'}
              <RightOutlined />
            </div>
          </div>
          <div className="group-notice">
            <p>群公告</p>
            <p className="group-notice-main">
              <TextArea
                value={groupMark}
                onChange={(e) => setGroupMark(e.target.value)}
                placeholder="请填写群公告"
                autoSize={{ minRows: 3, maxRows: 5 }}
              />
            </p>
          </div>
          <div className="btn-default" onClick={handleAddGroup}>
            创建
          </div>
        </div>
        <SelectUser isShow={isModalOpen} setIsModalOpen={setIsModalOpen} getChecks={handleGetChecks} />
      </div>
    </>
  );
}
export default AddGroup;
